import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';

import { Layout } from 'antd';

import memoryUtils from '../../utils/memoryUtils';
import { getUser, removeUser } from '../../utils/storageUtils';

import RightHeader from '../../components/header/header';
import LeftNav from '../../components/left-nav/left-nav';
import Home from './home/home';
import UserManage from './user-manage/user-manage';
import BarChart from './chart/bar-chart';
import PieChart from './chart/pie-chart';
import LineChart from './chart/line-char';
import CommodityManage from './commodity-manage/commodity-manage';
import CategoryManage from './category-manage/category-manage';
import CharacterManage from './character-manage/character-manage';

import './admin.css';

const { Header, Footer, Sider, Content } = Layout;

export default class admin extends Component {
  logOut = () => {
    this.props.history.replace('/login');
  };

  logOutAndClear = () => {
    removeUser();
    this.props.history.replace('/login');
  };

  render() {
    const user =
      memoryUtils.user && memoryUtils.user.id ? memoryUtils.user : getUser();
    if (!user || !user.id) {
      this.props.history.replace('/login');
    }
    return (
      <div className="admin-container">
        <Layout className="layout-container">
          <Sider width={220} className="layout-sider">
            <LeftNav />
          </Sider>
          <Layout>
            <Header className="layout-header">
              <RightHeader
                logOut={this.logOut}
                logOutAndClear={this.logOutAndClear}
                user={user}
              />
            </Header>
            <Content className="layout-content">
              <div className="content-container">
                <Switch>
                  <Route path="/home" component={Home} />
                  <Route path="/category-manage" component={CategoryManage} />
                  <Route path="/commodity-manage" component={CommodityManage} />
                  <Route path="/user-manage" component={UserManage} />
                  <Route path="/character-manage" component={CharacterManage} />
                  <Route path="/pie-chart" component={PieChart} />
                  <Route path="/line-chart" component={LineChart} />
                  <Route path="/bar-chart" component={BarChart} />
                  <Redirect to="/home" />
                </Switch>
              </div>
            </Content>
            <Footer className="layout-footer">Made by Starfish_DL</Footer>
          </Layout>
        </Layout>
      </div>
    );
  }
}
